<template>
  <div class="LeftMiddle">
    <div class="announcement">
      <div
        class="perline"
        v-for="(announce, index) in leftmiddledata[0] &&
          leftmiddledata[0].announcements"
        :key="index"
      >
        <div class="circle"></div>
        <div class="sentence">{{ announce.announcement }}</div>
      </div>
    </div>
    <div class="buttom">
      <div class="words">
        {{ leftmiddledata[0] && leftmiddledata[0].button }}
      </div>
    </div>
  </div>
</template>

<script>
import { getLeftMiddle } from "../assets/api/api";
export default {
  data() {
    return {
      leftmiddledata: [],
      timer: null,
    };
  },
  created() {
    this.fetchData();
    this.timer = setInterval(() => {
      this.fetchData();
    }, this.schedule);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    fetchData() {
      getLeftMiddle().then((res) => {
        this.leftmiddledata = res.data.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.LeftMiddle {
  margin-top: 46px;
  margin-left: 71px;
  .announcement {
    padding-bottom: 8px;
    .perline {
      display: flex;
      margin-bottom: 13px;
      width: 794px;
      .circle {
        width: 12px;
        height: 12px;
        background-color: #0098ff;
        border-radius: 50%;
        align-self: center;
      }
      .sentence {
        margin-left: 16px;
        color: #3cb0ff;
        font-family: SourceHanSansCN-Regular;
        font-size: 26px;
      }
    }
  }
  .buttom {
    background-image: url("../assets/v3_公告.png");
    width: 310px;
    height: 52px;
    display: flex;
    .words {
      align-self: center;
      margin-left: 27px;
      font-family: SourceHanSansCN-Regular;
      font-size: 24px;
      color: white;
      width: 240px;
      height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
